<script setup>
  const props = defineProps({
    q: '',
    a: ''
  })

  const flag = ref(true)

  function toggleFlag() {
    flag.value = !flag.value
  }
</script>

<template>
  <div>
    <div class="flex items-start font-medium cursor-pointer" @click="toggleFlag">
      <span class="p-1 px-2 mr-4 text-sm text-white bg-indigo-500 rounded">Q</span>
      <div class="flex-1">{{ q }}</div>
    </div>
    <div class="flex items-start py-4 text-sm text-slate-500" v-if="flag">
      <span class="p-1 px-2 mr-4 text-sm rounded bg-slate-100 text-slate-700">A</span>
      <div class="flex-1">{{ a }}</div>
    </div>
  </div>
</template>